<div class="account-component">
  <div class="title">
    <div>注销用户</div>
  </div>
  <div class="logoff">
    <form dForm [layout]="layoutDirection" ngForm [dValidateRules]="formRules.rule" (dSubmit)="submitForm($event)">
      <d-form-item class="password">
        <d-form-label [required]="true">请输入用户名</d-form-label>
        <d-form-control>
          <input dTextInput type="userName" name="userName" placeholder="请输入用户名" [(ngModel)]="userName" />
        </d-form-control>
      </d-form-item>
      <d-form-item class="password">
        <d-form-label [required]="true">请输入密码</d-form-label>
        <d-form-control [suffixTemplate]="suffixTemplate1">
          <input dTextInput [type]="showOldPassword ? 'text' : 'password'" name="password" [(ngModel)]="oldPassword"
            [dValidateRules]="formRules.passwordRules" placeholder="请输入密码（8-32个数字字母特殊字符组合）" />
        </d-form-control>
        <ng-template #suffixTemplate1>
          <i (click)="showOldPassword = !showOldPassword" [class]="
            showOldPassword
              ? 'icon icon-preview'
              : 'icon icon-preview-forbidden'
          "></i>
        </ng-template>
      </d-form-item>
      <d-form-operation>
        <button class="submit" dFormSubmit>注销账号</button>
      </d-form-operation>
    </form>
  </div>
</div>
